<template>
  <div class="warp">
    <div class="title-bar">
      <div class="title">
        24小时人员进出记录
        <span><i class="cr"></i>出</span>
        <span><i class="cb"></i>进</span>
      </div>
      <div class="mychart" id="alarmTrendEcharts"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['personList'],
  data () {
    return {
      detail: []
    }
  },
  mounted () {
  },
  watch: {
    personList (val) {
      this.detail = val
      this.echartFn(val)
    }
  },
  methods: {
    echartFn (val) {
      let xAxisData = [] // x轴 24小时 标注数据
      let data1 = [] // 24小时人员进入数据
      let data2 = [] // 24小时人员出去数据
      val.forEach(item => {
        data1.push(item.inCount)
        data2.push(item.outCount * -1)
        xAxisData.push(item.hour)
      })

      // let itemStyle = {
      //   emphasis: {
      //     barBorderWidth: 2,
      //     shadowBlur: 10,
      //     shadowOffsetX: 0,
      //     shadowOffsetY: 0,
      //     shadowColor: 'rgba(0,0,0,0.5)'
      //   }
      // }

      let option = {
        tooltip: {},
        xAxis: {
          show: true,
          data: xAxisData,
          silent: false,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'transparent'
            }
          },
          splitArea: { show: false },

          axisLabel: {
            show: true,
            interval: 'auto',
            color: '#cccccc'
          }

        },
        yAxis: {
          show: true,
          inverse: false,
          silent: false,
          axisLine: {
            show: false,
            onZero: true
          },
          splitArea: { show: false },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          },
          axisLabel: {
            show: true,
            color: '#9FACC3'
          },
          axisTick: {
            show: false
          }

        },
        grid: {
          left: 35
        },

        series: [
          {
            name: '进',
            type: 'bar',
            stack: 'one',
            data: data1,
            itemStyle: {
              normal: {
                color: '#50E3C2'
              }
            }
          },
          {
            name: '出',
            type: 'bar',
            stack: 'one',
            data: data2,
            itemStyle: {
              normal: {
                color: '#F488AC'
              }
            }
          }

        ]
      }

      let charts = this.$echarts.init(
        document.getElementById('alarmTrendEcharts')
      )

      charts.setOption(option, true)
    }
  }
}
</script>
<style lang="less" scoped>
  .skin-white {
    .warp {
      color: #4C6072 !important;
    }
    .title-bar {
      color: #4C6072 !important;
    }
  }

  .warp {
    padding: 20px;
  }

  .title-bar {
    color: #fff;
    > div {
      font-size: 14px;
      span {
        color: #9FACC3;
        float: right;
        margin-left: 12px;
      }
      span i {
        margin-right: 6px;
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 2px;
      }
      span .cb {
        background-color: #50E3C2;
      }
      span .cr {
        background-color: #F488AC;
      }
    }
  }

  .mychart {
    margin-top: -20px;
    margin-left: 12px;
    width: 250px;
    height: 260px;
  }
</style>
